<template>
  <h2>HTTP-axios请求</h2>
  <div class="note">
    <h3>axios VS API</h3>
    <p>
      1. 简单性与可读性： - Axios：使用起来更简洁，支持Promise API，并且默认将响应数据解析为JSON。 -
      Fetch: 需要手动解析响应数据，并且需要处理HTTP错误状态。
    </p>
    <p>
      2. 支持请求和响应拦截: - Axios:
      内置支持请求和响应拦截器，方便在发送请求前或接收响应后做一些处理（如添加授权token、处理错误等）。
      - Fetch: 不支持拦截器，需要手动实现相应逻辑。
    </p>
    <p>
      3. 自动转换 JSON - Axios: 自动将响应内容转换为JSON，不需要额外调用 .json() 方法。 - Fetch:
      需要手动调用 .json() 方法来解析响应体。
    </p>
    <p>
      4. 取消请求 - Axios: 提供了内置的请求取消功能，可以使用 CancelToken 来实现。 - Fetch: 需要配合
      AbortController 使用。
    </p>
    <p>
      5. 支持请求超时 - Axios: 可以直接设置请求超时时间。 - Fetch:
      没有内置的超时机制，需要手动实现。
    </p>
    <p>
      6. 浏览器兼容性 - Axios: 适用于大多数现代浏览器，并且对旧版浏览器的支持较好。 - Fetch:
      在IE等旧浏览器不支持，需要使用polyfill。
    </p>
    <p>
      总结： - 如果追求简单易用，尤其是在处理JSON数据时，axios 是一个更方便的选择。 -
      如果希望控制更多细节，或者想要使用原生API，fetch 是一个不错的选择。
    </p>
  </div>
  <div class="group">
    <button @click="getRolesPageHandler">get-角色分页列表</button>
    <button @click="postRolesHandler">post-新增角色</button>
    <button @click="putRolesRoleId">put-修改角色</button>
    <button @click="deleteRolesIds">delete-删除角色</button>
    <button @click="patchRolesRoleIdStatus">patch-修改角色状态</button>
  </div>
  <div class="group">
    <ul>
      <li v-for="item in roles" :key="item.id">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

import {
  getRolesPage,
  postRoles,
  putRolesRoleId,
  deleteRolesIds,
  patchRolesRoleIdStatus
} from '@/service/study1/demo2'

const roles = ref([])

// 角色分页列表
const getRolesPageHandler = async () => {
  const resJson = await getRolesPage()
  roles.value = resJson.data.list
}

// 新增角色
const postRolesHandler = async () => {
  const resJson = await postRoles()
  console.log(resJson, 'resJson')
}
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>

